<template>
    <div class="header">
        <div class="menu" @click.stop="onMenuClick">
            <el-icon>
                <MenuIcon v-if="!menu"/>
                <CloseIcon v-else/>
            </el-icon>
        </div>
        
        <HomeButton/>
        <div class="blank"></div>
        <TopMenu/>
        <ExitButton/>
    </div>
</template>

<script>

import {
    Menu as MenuIcon,
    Close as CloseIcon
} from '@element-plus/icons-vue' ;

import HomeButton from './Header/button/Home' ;

import TopMenu from './Header/top/Menu' ;

import ExitButton from './Header/button/Exit' ;

export default {

    emits:[
        'update:menu'
    ],

    props:[
        'menu'
    ],

    components:{
        MenuIcon,
        CloseIcon,
        HomeButton,
        ExitButton,
        TopMenu
    },

    methods: {
        onMenuClick(){

            let me = this ;

            me.$emit('update:menu' , !me.menu) ;
        }
    },

} ;

</script>

<style lang="scss" scoped>

.header{
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16);
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 10px;

    > .menu{
        background-color: #ff6a00;
        color:#fff;
        font-size: 22px;
        width:65px;
        height:50px;
        text-align: center;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    > .button-home{
        margin-left:10px;
    }

    > .blank{
        flex:1;
    }

    > .button-exit{
        margin-left:10px;
    }
}

</style>